<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>h5</title>
		<link rel="stylesheet" href="css/swiper.min.css">
		<link rel="stylesheet" href="css/style.css">
	</head>

	<body class="index-bg">
		<div class="page">
			<div class="header">
				<div class="logo">斑马优惠</div>
				<div class="quit"><img src="images/quit-icon.png"></div>
				<div class="cls"></div>
				<div class="section">
					<div class="search">
						<a href="javascript:;" class="search-btn"><img src="images/search-icon.png"></a>
						<input type="text" value="" class="search-input" placeholder="请输入关键词">
					</div>
					<div class="part">
						<div class="qiandao"><img src="images/redbag-icon.png"> 签到</div>
						<div class="kefu"><img src="images/wx-icon.png"> 客服</div>
					</div>
				</div>
			</div>
			<div class="content">
				<div class="menu">
					<ul>
						<li><a href="#">首页</a></li>
						<li><a href="#">女装</a></li>
						<li><a href="#">百货</a></li>
						<li><a href="#">美食</a></li>
						<li><a href="#">美妆</a></li>
						<li><a href="#">内衣</a></li>
						<li><a href="#">鞋包</a></li>
					</ul>
				</div>
				<div id="banner" class="swiper-container">
				    <div class="swiper-wrapper">
				        <div class="swiper-slide"><img src="images/banner1.png"></div>
				        <div class="swiper-slide"><img src="images/banner1.png"></div>
				        <div class="swiper-slide"><img src="images/banner1.png"></div>
				    </div>
				    <!-- 如果需要分页器 -->
				    <div class="swiper-pagination"></div>
				</div>
				<div class="list">
					<ul>
						<li><a href="#"><img src="images/ms-icon.png"><span>限时折扣</span></a></li>
						<li><a href="#"><img src="images/yq-icon.png"><span>大额券</span></a></li>
						<li><a href="#"><img src="images/ss-icon.png"><span>热销榜单</span></a></li>
						<li><a href="#"><img src="images/hh-icon.png"><span>金牌卖家</span></a></li>
						<li><a href="#"><img src="images/yy-icon.png"><span>必买清单</span></a></li>
						<li><a href="#"><img src="images/jj-icon.png"><span>9块邮</span></a></li>
						<li><a href="#"><img src="images/tt-icon.png"><span>淘抢购</span></a></li>
						<li><a href="#"><img src="images/qq-icon.png"><span>天猫精选</span></a></li>
						<li><a href="#"><img src="images/ju-icon.png"><span>聚划算</span></a></li>
						<li><a href="#"><img src="images/mm-icon.png"><span>全部分类</span></a></li>
					</ul>
					<div class="cls"></div>
				</div>				

				<div id="announcement" class="swiper-container">
				  <div class="swiper-wrapper">
				    <div class="swiper-slide">
				      <a href="#">女博士相亲角被嘲？其实是有“预谋”的行为艺术</a></div>
				    <div class="swiper-slide">
				      <a href="#">你为什么还没过上你想要的生活</a></div>
				    <div class="swiper-slide">
				      <a href="#">莲花粉橙色也太美了！连直男都爱的仙女色！</a></div>
				  </div>
				</div>


				<div class="guanggao"><img src="images/guanggao.png"></div>
				<div class="hotpro">
					<div class="hotpro-l">
						<div class="hotpro-inner"><img src="images/pro1.png"></div>
					</div>
					<div class="hotpro-r">
						<div class="hotpro-top"><img src="images/pro2.png"></div>
						<div class="hotpro-bot">
							<div class="hotpro-bot-l">
								<div class="hotpro-bot-l-inner"><img src="images/pro3.png"></div>
							</div>
							<div class="hotpro-bot-r">
								<div class="hotpro-bot-r-inner"><img src="images/pro4.png"></div>
							</div>
							<div class="cls"></div>
						</div>
					</div>
					<div class="cls"></div>
				</div>
				<div class="miaosha">
					<div class="miaosha-title">
						<h3>限时咚咚抢</h3>
						<span class="time">19:00专场</span>
						<span class="text">正在秒杀</span>
						<div class="miaosha-link"><a href="#">抢更多好货>></a></div>
					</div>
					<div class="miaosha-txt">
						<ul>
							<li>
								<div class="li-inner">
									<div class="miaosha-txt-img"><img src="images/hot2.png"></div>
									<div class="miaosha-txt-title">
										<h4>宝宝启蒙认知教育</h4>
										<span class="price">¥2.15</span> <span class="tips">券后</span>
									</div>
								</div>
							</li>
							<li>
								<div class="li-inner">
									<div class="miaosha-txt-img"><img src="images/hot1.png"></div>
									<div class="miaosha-txt-title">
										<h4>振汗防臭男袜10双</h4>
										<span class="price">¥2.15</span> <span class="tips">券后</span>
									</div>
								</div>
							</li>
							<li>
								<div class="li-inner">
									<div class="miaosha-txt-img"><img src="images/hot3.png"></div>
									<div class="miaosha-txt-title">
										<h4>宝宝启蒙认知教育</h4>
										<span class="price">¥2.15</span> <span class="tips">券后</span>
									</div>
								</div>
							</li>
							<div class="cls"></div>
						</ul>
					</div>
					<div class="quan">
						<div class="quan-title">
							<div class="quan-title-line"><h2>实时好券</h2></div>
							<div class="quan-title-fu">全网热门优惠券 实时更新</div>
						</div>
						<div class="quan-txt">
							<ul>
								<li>
									<div class="quan-inner">
										<div class="quan-txt-img"><img src="images/quan1.png"></div>
										<div class="quan-txt-title">
											<h4>宝宝启蒙认知教育</h4>
											<div class="quan-txt-title-l">
												<span class="quan-txt-be">售价¥22.15</span>
											</div>
											<div class="quan-txt-title-r">
												<span class="quan-txt-af">券后¥2.15</span>
											</div>
											<div class="cls"></div>
											<div class="quan-txt-title-l">
												<span class="quan-txt-ka">20元券</span>
												<span class="quan-txt-nu">月销2000</span>
											</div>
											<div class="quan-txt-title-r">
												<span class="quan-txt-sh">分享</span>
											</div>
											<div class="cls"></div>
										</div>
									</div>
								</li>

								<li>
									<div class="quan-inner">
										<div class="quan-txt-img"><img src="images/quan2.png"></div>
										<div class="quan-txt-title">
											<h4>宝宝启蒙认知教育</h4>
											<div class="quan-txt-title-l">
												<span class="quan-txt-be">售价¥22.15</span>
											</div>
											<div class="quan-txt-title-r">
												<span class="quan-txt-af">券后¥2.15</span>
											</div>
											<div class="cls"></div>
											<div class="quan-txt-title-l">
												<span class="quan-txt-ka">20元券</span>
												<span class="quan-txt-nu">月销2000</span>
											</div>
											<div class="quan-txt-title-r">
												<span class="quan-txt-sh">分享</span>
											</div>
											<div class="cls"></div>
										</div>
									</div>
								</li>

								<li>
									<div class="quan-inner">
										<div class="quan-txt-img"><img src="images/quan1.png"></div>
										<div class="quan-txt-title">
											<h4>宝宝启蒙认知教育</h4>
											<div class="quan-txt-title-l">
												<span class="quan-txt-be">售价¥22.15</span>
											</div>
											<div class="quan-txt-title-r">
												<span class="quan-txt-af">券后¥2.15</span>
											</div>
											<div class="cls"></div>
											<div class="quan-txt-title-l">
												<span class="quan-txt-ka">20元券</span>
												<span class="quan-txt-nu">月销2000</span>
											</div>
											<div class="quan-txt-title-r">
												<span class="quan-txt-sh">分享</span>
											</div>
											<div class="cls"></div>
										</div>
									</div>
								</li>

								<li>
									<div class="quan-inner">
										<div class="quan-txt-img"><img src="images/quan2.png"></div>
										<div class="quan-txt-title">
											<h4>宝宝启蒙认知教育</h4>
											<div class="quan-txt-title-l">
												<span class="quan-txt-be">售价¥22.15</span>
											</div>
											<div class="quan-txt-title-r">
												<span class="quan-txt-af">券后¥2.15</span>
											</div>
											<div class="cls"></div>
											<div class="quan-txt-title-l">
												<span class="quan-txt-ka">20元券</span>
												<span class="quan-txt-nu">月销2000</span>
											</div>
											<div class="quan-txt-title-r">
												<span class="quan-txt-sh">分享</span>
											</div>
											<div class="cls"></div>
										</div>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	 <script src="js/swiper.min.js"></script>
	 <script>        
		  var mySwiper = new Swiper ('#banner', {
		    autoplay: 5000,
        	visibilityFullFit: true,
        	loop: true,
	        pagination: {
	            el: '#banner .swiper-pagination',
	        }

		  });
		  var announcementSwiper = new Swiper('#announcement', {
	        direction: 'vertical',
			loop: true,
	        autoplay: {
	            delay: 3000,
	            disableOnInteraction: false,
	        }
	    })
        
  </script>	
	</body>
</html>